<template>
  <div id="login">
    <!-- title part -->
    <div class="loginTitle">
      <div class="loginTitle_font">登录账户</div>
      <div class="loginTitle_discripe">未注册手机验证后即完成注册</div>
    </div>

    <!-- form part -->
    <div class="loginForm">
      <van-field
        class="loginInput"
        v-model.trim="phone"
        type="tel"
        placeholder="请输入手机号"
        @input="phoneInputing"
        maxlength="11"
        :border="false"
      />
      <img
        v-show="phone.length > 0"
        class="clear"
        @click="clear"
        src="@/assets/images/mobile_black/login/clear.png"
      />

      <button
        v-if="isCodeBtnDisabled"
        class="loginBtn btn_grey"
        :disabled="isCodeBtnDisabled"
        @click.stop="openCaptch"
      >
        获取验证码
      </button>
      <button
        v-else
        class="loginBtn btn_color"
        :disabled="isCodeBtnDisabled"
        @click.stop="openCaptch"
      >
        获取验证码
      </button>

      <transition name="fade">
        <div class="captch" v-show="isShowCap">
          <NoCaptcha
            @slideCallback="finishSlide"
            @hiddenCap="hiddenCap"
            :reload="reload"
            :phone="phone"
          />
        </div>
      </transition>
    </div>

    <!-- privacy part -->
    <div class="loginPrivacy">
      <img
        class="privacy_left"
        @click="toggleAgree"
        v-if="isAgree"
        src="@/assets/images/mobile_black/login/agree.png"
      />
      <img
        class="privacy_left"
        @click="toggleAgree"
        v-else
        src="@/assets/images/mobile_black/login/disagree.png"
      />

      <span class="privacy_right"
        ><span @click="toggleAgree"
          >未注册手机验证过后自动登录，注册即表示同意</span
        ><span @click.stop="gotoUserAgreement" class="cGreen">《用户协议》</span
        ><span @click="toggleAgree">和</span>
        <span @click.stop="gotoPrivacy" class="cGreen">《隐私政策》</span>
      </span>
    </div>

    <!-- wxLogin part -->
    <template v-if="!isApp">
      <div class="wxLogin" v-show="hideshow">
        <span>微信一键登录</span>
        <img
          @click.stop="wxLogin"
          src="@/assets/images/mobile_black/login/wx.png"
        />
      </div>
    </template>

    <!-- bottom part -->
    <div class="bottomPart" v-show="hideshow">
      Copyright © 2022 海南原上区块链科技有限公司
      <br />
      <span @click="linkTo">All Rights Reserved</span>
    </div>
  </div>
</template>

<script>
// components
import NoCaptcha from "@/components/NoCaptch";
// vuelidate 用于表单验证
import { required, minLength } from "vuelidate/lib/validators";
// utils
import { isWeixin, reHeight } from "@/utils";
import { iscode } from "@/utils";
// api
import { sendVerificationCodeApi, verifyOneBuyCodeApi } from "@/api";
// js
import baseUrl from "@/utils/baseUrl.js";
import { isIOS } from "../../utils";

export default {
  name: "Login",
  components: {
    NoCaptcha,
  },
  data() {
    return {
      // 表单数据收集
      phone: "",
      // 按钮是否禁用
      isCodeBtnDisabled: true,
      // 是否同意隐私政策和用户协议
      isAgree: false,
      // 解决手机键盘弹起布局错位问题
      docmHeight:
        document.documentElement.clientHeight || document.body.clientHeight,
      showHeight:
        document.documentElement.clientHeight || document.body.clientHeight,
      hideshow: true, //显示或者隐藏footer
      // 邀请码
      inviteCode: null,
      // 一元购
      onebuy_code: null,
      // 参数商品id
      payload_id: this.$route.query.id ?? null,
      // 是否重置验证
      reload: false,
      // 是否显示重置验证
      isShowCap: false,
      // 验证附带信息
      secret: "",
      isApp: false,
    };
  },
  // vuelidate验证表单
  validations: {
    phone: {
      required,
      minLength: minLength(11),
    },
  },
  watch: {
    // 解决手机键盘弹起布局错位问题
    showHeight: function() {
      if (this.isApp == false && !isIOS()) {
        if (this.docmHeight > this.showHeight) {
          //隐藏
          this.hideshow = false;
        } else {
          //显示
          this.hideshow = true;
        }
      }
    },
    // 监视按钮是否禁用
    isCodeBtnDisabled(newVal) {
      if (newVal) {
        this.reload = true;
        this.hiddenCap();
      }
    },
  },
  created() {
    let isApp = JSON.parse(window.localStorage.getItem("isApp"));
    if (isApp) {
      this.isApp = true;
    } else {
      this.isApp = false;
    }
  },
  mounted() {
    //监听事件
    window.onresize = () => {
      return (() => {
        this.showHeight =
          document.documentElement.clientHeight || document.body.clientHeight;
      })();
    };
    reHeight("login", this);

    // 加工，用于直接微信登录重定向时携带
    if (this.$route.query.inviteCode) {
      this.inviteCode = "I-" + this.$route.query.inviteCode;
    }
    if (this.$route.query.onebuy_code) {
      this.onebuy_code = "O-" + this.$route.query.onebuy_code;
      this.verifyOneBuyCode();
    }
  },
  methods: {
    // -----异步相关方法-----
    // 检测一元购邀请码是否有效
    async verifyOneBuyCode() {
      let res = await verifyOneBuyCodeApi({
        onebuy_code: this.$route.query.onebuy_code ?? "",
      });
      if (iscode(res)) {
      }
    },

    // 微信一键登录
    async wxLogin() {
      if (!this.isAgree) {
        this.$toast("请勾选并同意协议");
        return;
      }

      window.localStorage.setItem("phoneFirstLogin", true);

      location.assign(
        `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx55eb0c5e4cf93b2d&redirect_uri=${
          baseUrl.productionWeb
        }&response_type=code&scope=snsapi_userinfo&state=${this.inviteCode ??
          this.onebuy_code ??
          -1}+${this.payload_id ?? -1}`
      );
    },

    // -----功能性方法-----
    // 开启验证
    openCaptch() {
      this.showCap();
      setTimeout(() => {
        this.reload = true;
        this.hiddenCap();
      }, 60000);
    },
    // show ic
    showCap() {
      this.isShowCap = true;
    },
    // hidden ic
    hiddenCap() {
      this.isShowCap = false;
    },
    // 验证成功
    finishSlide(secret) {
      this.secret = secret;
    },
    // 清空输入框
    clear() {
      this.initForm();
    },
    // 切换是否同意协议和政策
    toggleAgree() {
      this.isAgree = !this.isAgree;
      if (!this.$v.phone.$invalid && this.isAgree) {
        this.isCodeBtnDisabled = false;
      } else {
        this.isCodeBtnDisabled = true;
      }
    },
    // 初始化表单
    initForm() {
      // 保证每次重新点开没有数据残留
      this.phone = "";
      this.isCodeBtnDisabled = true;
    },
    // 手机输入框输入时，正则限制只能输入数字
    phoneInputing() {
      this.$nextTick(() => {
        this.phone = this.phone.replace(/[^\d]/g, "");
      });

      if (!this.$v.phone.$invalid && this.isAgree) {
        this.isCodeBtnDisabled = false;
      } else {
        this.isCodeBtnDisabled = true;
      }
    },

    // -----跳转相关方法-----
    // 跳转到用户协议界面
    gotoUserAgreement() {
      this.$router.push("/userAgreement");
    },
    // 跳转到隐私政策界面
    gotoPrivacy() {
      this.$router.push("/privacy");
    },
    // bottom part
    linkTo() {
      window.open("https://beian.miit.gov.cn/#/Integrated/index", "_blank");
    },
  },
};
</script>

<style lang="less" scoped>
#login {
  width: 100%;
  height: 100%;
  min-height: 1424px;
  overflow: hidden;
  padding: 0 50px;

  // >> title区域
  .loginTitle {
    display: flex;
    flex-direction: column;
    margin-top: 224px;

    .loginTitle_font {
      font-size: 48px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #ffffff;
    }

    .loginTitle_discripe {
      font-size: 26px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #666666;
      margin-top: 40px;
    }
  }

  // >> 登录表单区域
  .loginForm {
    position: relative;
    width: 100%;
    margin-top: 100px;

    /deep/.van-cell {
      background: none !important;
    }

    .loginInput {
      padding: 0;
      padding-bottom: 35px;
      border-bottom: 2px solid #444444;

      /deep/.van-field__control {
        font-size: 40px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
      }
    }

    .clear {
      position: absolute;
      top: 15px;
      right: 0;
      width: 28px;
      height: 28px;
    }

    /deep/.loginBtn {
      position: relative;
      width: 100%;
      height: 100px;
      font-size: 32px;
      font-family: Microsoft YaHei;
      border-radius: 0;
      color: #2b2c2d;
      font-weight: 500;
      border: none;
      margin-top: 100px;
      background: none;
      background-position: center center;
      background-size: 100% 100%;
    }
    .btn_color {
      background-image: url("../../assets/images/mobile_black/login/btn_color.png");
    }
    .btn_grey {
      background-image: url("../../assets/images/mobile_black/login/btn_grey.png");
    }

    .captch {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 100px;
      background-color: #1e2020;
    }
  }

  // >> 用户协议
  .loginPrivacy {
    display: flex;
    width: 100%;
    margin-top: 40px;

    .privacy_left {
      width: 28px;
      height: 28px;
      margin-top: 5px;
    }

    .privacy_right {
      width: 540px;
      font-size: 26px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      line-height: 40px;
      margin-left: 20px;

      .cGreen {
        line-height: 40px;
        color: #00ffb0;
      }
    }
  }

  // >> 微信一键登录
  .wxLogin {
    position: absolute;
    left: 0;
    bottom: 198px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;

    span {
      font-size: 26px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
    }

    img {
      width: 72px;
      height: 72px;
      margin-top: 20px;
    }
  }

  // >> 底部文字
  .bottomPart {
    position: absolute;
    left: 0;
    bottom: 64px;
    width: 100%;
    text-align: center;
    font-size: 24px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
  }

  // transition
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.5s;
  }
  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
  }
}
</style>

<style lang="less">
input::-webkit-input-placeholder {
  color: #444444 !important;
}
</style>
